/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  Text,
  useTheme,
  Container,
  Button,
  SuffixInput,
  IconArrowRight,
  InputDatalist,
  InputLine, LineColumn,
  CommitInput
} from "customize-easy-ui-component";
import { DialogEnterReturn } from "../../context/DialogEnterReturn";
//import queryString from "querystring";
import {useCommnBaseParm, CommnBase} from "./CommnBase";
const queryString = require('query-string');

export const 罐车车辆类=["轻型罐式货车","中型罐式货车","常压油罐车","化工液体罐车","重型罐式货车","重型罐式半挂车","重型普通半挂车"];

//可嵌套的编辑器；传递保存变动数据。 中文可用，但是引用时刻会告警徐改成英文<As...>
interface 常压容器props {
  id?: string;
  readOnly?: boolean;
  editable?: boolean;
  //当前设备数据(确认修改之后)
  eqp?:any;
  //去修改设备数据
  mutationFunc: (...args: any[]) => any;
}
/**常压容器 委托的 实际没有显示几个技术参数的！ 监察平台常压容器没有单独技术参数表。
 * */
export const 常压容器: React.FunctionComponent<常压容器props> = ({
       readOnly,
       id,
       editable,
       eqp=null,
                                                           mutationFunc,
     }) =>
{
  //const qs= queryString.parse(window.location.search);
  const theme = useTheme();
  const {save}= window.history.state?.state??{};      //通用伪对话框传递格式
  const edt = save?  save : eqp;

  const [vol, setVol] = React.useState(edt.vol);
  const [rtlf, setRtlf] = React.useState(edt.rtlf);
  //不能出现多次 const [plat, setPlat] = React.useState(edt.plat);

  const  svp = edt?.svp;
  const [车辆类, set车辆类] = React.useState(svp?.车辆类);
  const [车架, set车架] = React.useState(svp?.车架);
  const [发动机, set发动机] = React.useState(svp?.发动机);
  const  pa = edt?.pa;
  const [介质, set介质] = React.useState(pa?.介质);
  const [铭牌, set铭牌] = React.useState(pa?.铭牌);
  const [运输证, set运输证] = React.useState(pa?.运输证);
  const [委托书, set委托书] = React.useState(pa?.委托书);
  const [外尺寸, set外尺寸] = React.useState(pa?.外尺寸);
  const [额定压, set额定压] = React.useState(pa?.额定压);
  const [价格, set价格] = React.useState(pa?.价格);
  const [桶数, set桶数] = React.useState(pa?.桶数);
  const [桶规格, set桶规格] = React.useState(pa?.桶规格);
  const [修改人, set修改人] = React.useState(pa?.修改人);

  //肢解可复用的共同组件模式： Hook + 配套的组件。
  const cbp =useCommnBaseParm(eqp, svp, pa, save);
  //DeviceCommonInput没有对应参数 会报错json不会进入接口函数后端就报错Object null。
  async function confirmation() {
    const newdat={ ...eqp,  ...cbp.out,
      vol,rtlf,
      svp: { ...cbp.svpO,
        车辆类,车架,发动机,
        }
      ,
      pa: { ...cbp.paO,
        介质,铭牌,运输证,委托书,外尺寸,额定压,价格,桶数,桶规格,修改人,
        }

    };

    return newdat;
  }


  return (
    <div
      css={{
        [theme.mediaQueries.md]: {
          height: "auto",
          display: "block"
        }
      }}
    >
      <hr/>
      <Text
        css={{
          flex: 1,
          textAlign: "center",
          [theme.mediaQueries.md]: {
            textAlign: "left"
          }
        }}
        wrap={false}
        variant="h5"
        gutter={false}
      >
        {eqp.cod} 常压容器技术参数
      </Text>

      <div
        css={{
          flex: 1,
          [theme.mediaQueries.md]: {
            flex: "none"
          }
        }}
      >
        <div>
          <Container>
            <div
              css={{
                paddingTop: theme.spaces.lg,
                paddingBottom: theme.spaces.lg
              }}
            >

            <CommnBase cbp={cbp} id={id!}  confirmation={confirmation}/>
            <Text variant="h5">常压容器参数</Text>
            <LineColumn >
              <InputLine label={`容积:`}>
                <CommitInput  value={ vol || ''}  onSave={txt => setVol(txt||undefined) } />
              </InputLine>
              <InputLine label={`（罐车）汽车核定载质量:`}>
                <SuffixInput  onSave={txt=> setRtlf(txt||undefined)}
                              type="number"  value={ rtlf || ''}>kg</SuffixInput>
              </InputLine>
              <InputLine label={`（罐车）道路运输证号:`}>
                <CommitInput  value={ 运输证 || ''}  onSave={txt => set运输证(txt||undefined) } />
              </InputLine>
              <InputLine label={`委托书编号:`}>
                <CommitInput  value={ 委托书 || ''}  onSave={txt => set委托书(txt||undefined) } />
              </InputLine>
              <InputLine label={`（罐车）车辆类型:`}>
                <InputDatalist value={ 车辆类 || ''} datalist={罐车车辆类}
                               onListChange={v => set车辆类(v ||undefined)} />
              </InputLine>
              <InputLine label={`（罐车）车架号:`}>
                <CommitInput  value={ 车架 || ''}  onSave={txt => set车架(txt||undefined) } />
              </InputLine>
              <InputLine label={`（罐车）发动机号:`}>
                <CommitInput  value={ 发动机 || ''}  onSave={txt => set发动机(txt||undefined) } />
              </InputLine>
              <InputLine label={`（罐车）盛装介质:`}>
                <CommitInput  value={ 介质 || ''}  onSave={txt => set介质(txt||undefined) } />
              </InputLine>
              <InputLine label={`（罐车）罐体铭牌状况:`}>
                <CommitInput  value={ 铭牌 || ''}  onSave={txt => set铭牌(txt||undefined) } />
              </InputLine>
              <InputLine label={`（罐车）罐体外形尺寸:`}>
                <CommitInput  value={ 外尺寸 || ''}  onSave={txt => set外尺寸(txt||undefined) } />
              </InputLine>
              <InputLine label={`额定压力:`}>
                <CommitInput  value={ 额定压 || ''}  onSave={txt => set额定压(txt||undefined) } />
              </InputLine>
              <InputLine label={`价格:`}>
                <SuffixInput  onSave={txt=> set价格(txt||undefined)}
                              type="number"  value={ 价格 || ''}>kg？</SuffixInput>
              </InputLine>
              <InputLine label={`桶数:`}>
                <SuffixInput  onSave={txt=> set桶数(txt||undefined)}
                              value={ 桶数 || ''}>kg</SuffixInput>
              </InputLine>
              <InputLine label={`桶规格:`}>
                <CommitInput  value={ 桶规格 || ''}  onSave={txt => set桶规格(txt||undefined) } />
              </InputLine>
              <InputLine label={`最后修改人:`}>
                <CommitInput  value={ 修改人 || ''}  onSave={txt => set修改人(txt||undefined) } />
              </InputLine>

            </LineColumn>

              <Button size="lg" intent="primary"  iconAfter={<IconArrowRight />}
                      css={{ marginTop: theme.spaces.sm, whiteSpace:'unset' }}
                onPress={ async () => {
                  const eqpNew=await confirmation();
                  await mutationFunc(eqpNew);
                } }
              > 确认修改检查并保存到后端
              </Button>
            </div>
          </Container>
        </div>
      </div>

    </div>
  );
};

